<template>
<transition name="move">
  <q-card style="min-width: 305px" class="progress-dialog" v-if="show">
    <q-card-section class="dialog-head text-right">
      <q-icon @click="hideDialog" name="iconfont icontubiao-67" class="hide" />
    </q-card-section>
    <q-separator />
    <q-scroll-area :thumb-style="thumbStyle" style="height: 158px" :visible="true">
      <q-card-section class="progress-list" v-for="(file, fileIndex) in list" :key="fileIndex">
        <div class="name ellipsis">
          <q-icon name="img:statics/svg/paper-icon.svg" class="file-icon" />
          {{file.name}}
        </div>
        <progress-bar :value="file.progress*100"></progress-bar>
        <div class="state" :class="file.state">
          {{file.state==='success'?'传输成功':file.state==='fail'?'传输失败':'正在传输'}}</div>
      </q-card-section>
    </q-scroll-area>
  </q-card>
</transition>
</template>

<script>
import ProgressBar from 'src/components/progress-bar'
export default {
  name: 'progress-dialog',
  props: {
    list: {
      type: Array
    }
  },
  data () {
    return {
      show: false,
      thumbStyle: this.CommonConfig.thumbStyle // 滚动条样式
    }
  },
  methods: {
    showDialog () {
      this.show = true
    },
    hideDialog () {
      this.show = false
    }
  },
  components: {
    ProgressBar
  }
}
</script>

<style scoped lang="stylus">
.progress-dialog{
  position fixed
  right 0
  bottom 0
  z-index 1100
  background-color #fff
  .dialog-head{
    color #333
    padding 4px 10px
    height 20px
    line-height 1px
  }
}
.progress-list{
  display flex
  font-size 14px
  height 32px
  align-items center
  padding 0 6px
  .line:last-child{
    display none
  }
  &:last-child{
    border none
  }
  .name{
    width 58px
    margin-right 10px
    .file-icon{
      margin-left 4px
    }
  }
  .state{
    width 61px
    margin-left 10px
    color #333
    &.success{
      color $positive
    }
    &.fail{
      color $negative
    }
  }
}
</style>
